<template>
	<u-mask :show="show">
		<view class="activity-dialog-container">
			<view v-for="(item, index) in popList" :key="index">
				<view @click="activeClick(item)" v-if="item.isShow" class="activity-dialog-list">
					<image :src="item.imgUrl" class="activity-dialog-pic" mode="widthFix"></image>
					<image @click.stop="closeDialog(item)" src="@/static/common/close-icon.png" class="activity-close-icon"></image>
				</view>
			</view>
		</view>
	</u-mask>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

const show = defineModel();
const popList = defineModel('popList');

const closeDialog = (item) => {
	item.isShow = false;

	let hasPopShow = popList.value.every((pop) => pop.isShow == true);
	if (!hasPopShow) {
		show.value = false;
	}
};

const activeClick = (item) => {
	isLogin();
	
	closeDialog(item);
	
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(item.linkUrl)}`
	});
};

// 判断登录
const isLogin = () => {
	if (!userStore.access_token) {
		uni.navigateTo({
			url: '/subPages/login/index'
		})
		
		throw new Error('去登录！！！')
	};
}
</script>

<style lang="scss">
.activity-dialog-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 330px;
	height: 330px;
	z-index: 100;

	.activity-dialog-list {
		position: relative;
		width: 100%;
		height: 100%;

		.activity-dialog-pic {
			max-width: 100%;
		}

		.activity-close-icon {
			position: absolute;
			width: 32px;
			height: 32px;
			left: 50%;
			bottom: -50px;
			transform: translateX(-50%);
		}
	}
}
</style>
